<template>
  <div class="maincss">
    <div class="">
      <el-button class="fr" @click.native="handleClose">
        关闭
      </el-button>
      <el-button class="fr" @click.native="handleSubmit" type="primary" v-if="!disabled">
        提交
      </el-button>
      <h3>{{ title }}</h3>
      <p>基础信息</p>
      <el-divider/>
      <el-card class="gray-card no-border no-margin-top" shadow="never">
        <el-form ref="form" :model="form" class="form">
          <el-row>
            <el-col :span="8">
              <el-form-item label="所属科室：">
                <treeselect :disabled="disabled"
                            v-model="form.deptId"
                            @select="handleNodeClick"
                            :options="deptOptions" :show-count="true"
                            placeholder="请选择所属科室"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属项目：">
                <el-select v-model="form.projectId"
                           @change="handleChangeProject"
                           placeholder="请选择所属项目"
                           :disabled="disabled">
                  <el-option
                    v-for="item in prjectList"
                    :key="item.id"
                    :label="item.projectName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注：">
            <input type="textarea" class="textarea"
                   placeholder="请输入内容"
                   :disabled="disabled"
                   v-model="form.remark"/>
          </el-form-item>
        </el-form>
      </el-card>
      <p>检测规则信息</p>
      <el-divider/>
      <el-button class="fr" type="primary" @click="handleAdd" v-if="!disabled">新增一行</el-button>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="itemName" label="检验项">
          <template slot-scope="scope">
            <el-select v-model="scope.row.itemId"
                       :disabled="disabled"
                       placeholder="请选择检验项">
              <el-option
                v-for="item in itemList"
                :key="item.id"
                :label="item.itemName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="itemEname" label="英文名">
          <template slot-scope="scope">
            {{handleFilterEname(scope.row.itemId)}}
          </template>
        </el-table-column>

        <el-table-column prop="minnormalValue" label="正常值下限">
          <template slot-scope="scope">
            <el-input-number
              :disabled="disabled"
              class="td-number"
              v-model="scope.row.minnormalValue"
              :precision="2"
              :step="0.01"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="maxnormalValue" label="正常值上限">
          <template slot-scope="scope">
            <el-input-number
              :disabled="disabled"
              class="td-number"
              v-model="scope.row.maxnormalValue"
              :precision="2"
              :step="0.01"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="unit" label="单位">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unit" :disabled="disabled" class="td-input"/>
          </template>
        </el-table-column>

        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            <el-select v-model="scope.row.gender" :disabled="disabled" placeholder="请选择">
              <el-option
                v-for="item in sexList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="minageValue" label="最小年龄">
          <template slot-scope="scope">
            <el-input-number
              :disabled="disabled"
              class="td-number"
              v-model="scope.row.minageValue"
              :step="1"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="maxageValue" label="最大年龄">
          <template slot-scope="scope">
            <el-input-number
              :disabled="disabled"
              class="td-number"
              v-model="scope.row.maxageValue"
              :step="1"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="mincriticalValue" label="危急值下限">
          <template slot-scope="scope">
            <el-input-number
              :disabled="disabled"
              class="td-number"
              v-model="scope.row.mincriticalValue"
              :precision="2"
              :step="0.1"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="mincriticalReference" label="危急值下限临床意义参考">
          <template slot-scope="scope">
            <el-input v-model="scope.row.mincriticalReference" :disabled="disabled" class="td-input"/>
          </template>
        </el-table-column>

        <el-table-column prop="maxcriticalValue" label="危急值上限">
          <template slot-scope="scope">
            <el-input-number class="td-number"
                             :disabled="disabled"
                             v-model="scope.row.maxcriticalValue"
                             :precision="2"
                             :step="0.1"
                             :min="0"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="maxcriticalReference" label="危急值上限临床意义参考">
          <template slot-scope="scope">
            <el-input v-model="scope.row.maxcriticalReference" :disabled="disabled" class="td-input"/>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" v-if="!disabled">
          <template slot-scope="scope">
            <el-button
              @click="addJurisdiction(scope.$index, scope.row)"
              type="primary"
            >复制行
            </el-button>

            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              class="del-btn"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {addDetectionRules, updateDetectionRules, getDetectionRules, delDetectionRules} from "@/api/business/detectionRules"
import {queryItemList} from "@/api/business/projectTestitems"
import {selectList} from "@/api/business/project"


export default {
  name: "maintenanceInfo",
  components: {Treeselect},
  data() {
    return {
      visible: true,
      id: null,
      disabled: false,
      title: '新增',
      sexList: [
        {
          label: '全部',
          value: '1'
        },
        {
          label: '男',
          value: '2'
        },
        {
          label: '女',
          value: '3'
        }
      ],
      itemList: [],
      tableData: [],
      loading: false,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      prjectList: [],
      form: {
        projectId: '',
        projectName: '',
        deptId: 100,
        deptName: '湖南省人民医院',
        remark: ''
      }
    };
  },
  watch: {},
  created() {
    this.$nextTick(() => {
      this.getTreeselect();
      this.handleGetProjectList();
      this.handleGetItemList();
      this.title = this.$route.query.title
      this.id = this.$route.query.id
      if (this.$route.query.disabled && this.$route.query.disabled == '2') {
        this.disabled = true
      }
      if (this.id) {
        this.visible = false
        this.handleGetDetail(this.id)
      }
    })
  },
  methods: {
    // 获取详情
    handleGetDetail(id) {
      getDetectionRules(id).then((res) => {
        this.tableData.push(res.data)
        this.form = res.data
      })
    },
    handleAdd() {
      let row = {
        itemId: '',
        itemName: '',
        itemEname: '',
        minnormalValue: '',
        maxnormalValue: '',
        unit: '',
        gender: '',
        minageValue: '',
        maxageValue: '',
        mincriticalValue: '',
        mincriticalReference: '',
        maxcriticalValue: '',
        maxcriticalReference: '',
        id: ''
      }
      this.tableData.push(row)
    },
    // 删除一行
    handleDelete(index, row) {
      this.tableData.splice(index, 1)
    },
    // 增加一行
    addJurisdiction(index, row) {
      // 直接push是浅拷贝，只复制了地址过去，改成深拷贝
      this.tableData.push(JSON.parse(JSON.stringify(row)))
    },
    handleNodeClick(data) {
      this.form.deptName = data.label
    },
    handleChangeProject() {
      this.form.projectName = this.prjectList.filter(x => x.id == this.form.projectId)[0].projectName
    },
    handleFilterEname(id){
      if (id) {
        return this.itemList.filter(x => x.id == id)[0].itemEname;
      }
    },
    handleSubmit() {
      if (!this.form.projectId) {
        this.$message.warning('所属项目不能为空')
        return;
      }
      if (!this.form.deptId) {
        this.$message.warning('所属科室不能为空')
        return;
      }
      if (this.tableData) {
        this.tableData.map((item, index) => {
          if (!item.itemId) {
            this.$message.warning('检验项不能为空')
            return;
          }
          item.status = 1
          item.projectId = this.form.projectId
          item.projectName = this.form.projectName
          item.deptId = this.form.deptId
          item.deptName = this.form.deptName
          item.remark = this.form.remark
          item.itemEname = this.itemList.filter(x => x.id == item.itemId)[0].itemEname
          item.itemName = this.itemList.filter(x => x.id == item.itemId)[0].itemName
          if (item.id) {
            if (index >= 1) {
              item.id = ''
              addDetectionRules(item).then((res) => {
                this.handleClose()
              })
            } else {
              updateDetectionRules(item).then((res) => {
                this.handleClose()
              })
            }
          } else {
            addDetectionRules(item).then((res) => {
              this.handleClose()
            })
          }
        })
      } else {
        this.$message.warning('请输入检测项')
        return;
      }
    },
    // 获取检测项
    handleGetItemList() {
      queryItemList().then((res) => {
        this.itemList = res
      })
    },
    // 获取项目
    handleGetProjectList() {
      selectList().then((res) => {
        if (res) {
          this.prjectList = res
        }
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    handleClose() {
      this.disabled = false
      this.id = null
      this.$router.push({path: "/examine/rules/index"});
    },
  }
};
</script>

<style lang="scss" scoped>
.td-input {
  width: 80px !important;
}

.td-number {
  width: 120px !important;
}
</style>
